/* eslint-disable max-len */
import L from 'leaflet';
import { GridLayer, withLeaflet } from 'react-leaflet';
import { isEqual } from 'lodash';
import EventEmitter from '../util/EventEmitter';
import setting from './setting';

class LBaseLayer extends GridLayer {
  createLeafletElement({ leaflet, config: { customid, btn = {} } }) {
    const { map } = leaflet;
    // 加载图层
    const imgm = L.tileLayer.chinaProvider('Baidu.Satellite.Map', { maxZoom: 19 });
    const imga = L.tileLayer.chinaProvider('Baidu.Satellite.Annotion', { maxZoom: 19 });
    const satellite = L.layerGroup([imgm, imga]);

    const custom = L.tileLayer.chinaProvider('Baidu.Custom.Map', { customid, maxZoom: 19 });
    const normal = L.tileLayer.chinaProvider('Baidu.Custom.Map', {
      customid: 'normal',
      maxZoom: 19
    });

    const layers = {
      自定义层: custom,
      卫星图层: satellite,
      默认图层: normal,
    };
    const { show = false, width = 50, fontSize = 16 } = btn;
    if (show) {
      this.controlLayer = L.control
        .layers(layers, {}, { hideSingleBase: true })
        .addTo(map);
      const layerImg = document.getElementsByClassName(
        'leaflet-control-layers-toggle'
      )[0];
      layerImg.style.width = `${width}px`;
      layerImg.style.height = `${width}px`;

      const layerFont = document.getElementsByClassName(
        'leaflet-control-layers-base'
      )[0];
      layerFont.style.fontSize = `${fontSize}px`;
    }

    // 判断加载哪个图层
    if (customid === 'satellite') {
      return satellite;
    }
    EventEmitter.on('onmessage_command', (data) => {
      const {
        command,
        params: { latLng, zoom = 16, ...option },
      } = data;
      if (command === 'setView') {
        map.setView(latLng, zoom, {
          animate: true,
          ...option,
        });
      }
    });
    return custom;
  }

  updateLeafletElement(from, { config: { customid, btn = {} } }) {
    const { map } = from.leaflet;
    map.invalidateSize(true);
    // 加载图层
    const imgm = L.tileLayer.chinaProvider('Baidu.Satellite.Map', { maxZoom: 19 });
    const imga = L.tileLayer.chinaProvider('Baidu.Satellite.Annotion', { maxZoom: 19 });
    const satellite = L.layerGroup([imgm, imga]);

    const custom = L.tileLayer.chinaProvider('Baidu.Custom.Map', { customid, maxZoom: 19 });
    const normal = L.tileLayer.chinaProvider('Baidu.Custom.Map', {
      customid: 'normal',
      maxZoom: 19
    });

    const layers = {
      自定义层: custom,
      卫星图: satellite,
      默认图层: normal,
    };

    if (!isEqual(from.config.btn, btn)) {
      if (!btn.show) {
        this.controlLayer && this.controlLayer.remove();
        this.controlLayer = '';
      } else {
        const { width = 50, fontSize = 16 } = btn;
        this.controlLayer && this.controlLayer.remove();

        this.controlLayer = L.control
          .layers(layers, {}, { hideSingleBase: true })
          .addTo(map);
        const layerImg = document.getElementsByClassName(
          'leaflet-control-layers-toggle'
        )[0];
        layerImg.style.width = `${width}px`;
        layerImg.style.height = `${width}px`;

        const layerFont = document.getElementsByClassName(
          'leaflet-control-layers-base'
        )[0];
        layerFont.style.fontSize = `${fontSize}px`;
      }
    }

    if (from.config.customid !== customid) {
      map.removeLayer(this.leafletElement);

      if (customid === 'satellite') {
        satellite.addTo(map);
      } else {
        custom.addTo(map);
      }
    }
  }
}
LBaseLayer.setting = setting;

export default withLeaflet(LBaseLayer);
